<template>
  <div>
    <div class="item-title line" @mouseover="showButton" @mouseleave="hideButton">
      <div v-if="isEditing" class="bottom-space">
        <div class="line">
          <el-input v-model="tempName"></el-input>
        </div>
        <div class="line el-icon-check icon-button" @click="modifyName"></div>
        <div class="line el-icon-close icon-button" @click="cancelEditing"></div>
      </div>
      <div v-else>
        <div style="font-family: 'Microsoft YaHei',sans-serif; display: inline-block; ">
          <span v-html="field.displayName ? field.displayName : field.name"></span><em v-if="field.required" style="color: red">*</em>
        </div>
        <div :style="style" class="line">
          <div class="line">
            <el-link style="color: #2DB7A0" @click="editName">编辑</el-link>
          </div>
          <div class="line">
            <el-link v-if="!field.knowledgeLibFieldId" slot="reference" style="color: #FF5555" @click="handleDelete">删除</el-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'FieldTitle',
  props: {
    field: {},
    index: 0
  },
  data() {
    return {
      style: 'visibility: hidden',
      tempName: '',
      isEditing: false,
      tempValue: {}
    }
  },
  methods: {
    showButton() {
      this.style = 'visibility: visible;'
    },
    hideButton() {
      this.style = 'visibility: hidden;'
    },
    editName() {
      this.isEditing = true
      if (this.field.name === undefined || this.field.name === "") {
        this.tempName = this.field.fieldName
      } else {
        this.tempName = this.field.name
      }
    },
    modifyName() {
      this.isEditing = false
      this.$emit("modify", this.index, this.tempName)
      this.hideButton()
    },
    cancelEditing() {
      this.isEditing = false
      this.hideButton()
    },
    handleDelete() {
      this.$confirm('确认删除这个字段吗', '确认', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit("del", this.index)
      })
    }
  }
}
</script>

<style scoped>
.item-title {
  position: relative;
  margin-right: 5px;
}

.line {
  display: inline-block;
}

.icon-button {
  cursor: pointer;
}

.bottom-space {
  margin-bottom: 10px;
}
</style>
